// Tree

@import '../../style/themes/default';
@import '../../style/mixins/index';
@import './param';

@mixin tree {
}

@mixin tree-node {
  &-content {
    display: flex;
    padding: 0.0625rem 0;
    cursor: pointer;
    // transition: $--x-animation-duration-base;
    x-icon {
      padding: 0.25rem;
      color: $--x-text-400;
      font-size: 1rem;
      margin-right: 0.125rem;
      transition: $--x-animation-duration-base;
      &.is-leaf {
        visibility: hidden;
      }
      &.is-open {
        transform: rotate(90deg);
      }
      &:hover {
        color: $--x-text-300;
      }
    }
    x-checkbox {
      margin-right: 0.325rem;
      padding: 0.25rem 0;
    }
    &:hover,
    &.x-activated {
      background-color: $--x-background-a100;
    }
    &:hover {
      .#{$--x-tree-node-prefix}-operations {
        display: flex;
        align-items: center;
      }
    }
  }
  &-operations {
    display: none;
    .x-link {
      padding: 0 0.125rem;
    }
  }
  &-label {
    flex: 1;
    user-select: none;
    &.nowrap {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }
}
